<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1200" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>项目规划</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <!-- header 此处可以拆成模板 -->
  <header class="header">
    <!-- header-top -->
    <div class="header-top">
      <div class="wrap sbe">
        <p>
          <span>24小时服务热线：</span>
          <span>0539-9999999</span>
        </p>
        <ul>
          <li><a href="javascript:;">我的服务</a></li>
          <li><a href="javascript:;">客服中心</a></li>
          <li><a href="javascript:;">登录</a></li>
          <li><a href="javascript:;">注册</a></li>
        </ul>
      </div>
    </div>
    <!-- /header-top -->
    <div class="logo-nav wrap sbe">
      <div class="logo">
        <img src="./img/logo.png" alt="logo">
      </div>
      <nav class="nav">
        <a href="javascript:;">首页</a>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">项目规划</a>
        <a href="javascript:;">产品类型</a>
        <a href="javascript:;">陵园文化</a>
        <a href="javascript:;">VR视频</a>
        <a href="javascript:;">在线祭奠</a>
        <a href="javascript:;">会员中心</a>
      </nav>
    </div>
  </header>
  <!-- header 此处可以拆成模板 -->
  <!-- detail -->
  <section class="detail wrap">
    <div class="magnifier" id="magnifier1">
      <div class="magnifier-container">
        <div class="images-cover"></div>
        <!--当前图片显示容器-->
        <div class="move-view"></div>
        <!--跟随鼠标移动的盒子-->
      </div>
      <div class="magnifier-assembly">
        <!--按钮组-->
        <div class="magnifier-line">
          <ul class="clearfix animation03">
            <li>
              <div class="small-img">
                <img src="./img/detail-img.jpg" />
              </div>
            </li>
            <li>
              <div class="small-img">
                <img src="./img/detail-img.jpg" />
              </div>
            </li>
            <li>
              <div class="small-img">
                <img src="./img/about-left.jpg" />
              </div>
            </li>
            <li>
              <div class="small-img">
                <img src="./img/detail-img.jpg" />
              </div>
            </li>
          </ul>
        </div>
        <!--缩略图-->
      </div>
      <div class="magnifier-view"></div>
      <!--经过放大的图片显示容器-->
    </div>
    <div class="content">
      <h3>福寿陵园基本类型</h3>
      <ul class="ul">
        <li><img src="./img/icon1.jpg" />
          <span>
            所属园区：基本墓型
          </span></li>
        <li><img src="./img/icon2.jpg" />
          <span>
            占地面积：0平
          </span>
        </li>
        <li><img src="./img/icon3.jpg" />
          <span>所用石材：0</span>
        </li>
        <li><img src="./img/icon4.jpg" />
          <span>
            墓碑朝向：0
          </span>
        </li>
        <li><img src="./img/icon5.jpg" />
          <span>墓碑穴位：双穴</span>
        </li>
      </ul>
      <div class="con">
        <div class="btn">
          在线约看
        </div>
        <a href="javascript:;">查看更多墓型</a>
      </div>
      <div class="phone">
        <img src="./img/detail-phone.jpg" class="电话" />
        <span>0539-30000033</span>
      </div>
    </div>

  </section>
  <section class="detail-content wrap">
    <nav class="nav">
      <p class="active">详情介绍</p>
      <p>陵园碑型(29)</p>
      <p>陵园照片(126) </p>
      <p>陵园评价(40)</p>
      <p>位置交通</p>
    </nav>
    <section class="content">
      <div class="wrap-content">
        <img src="./img/detail-content-img.jpg" alt="详情" />
      </div>
      </script>
    </section>
  </section>
  <!-- /detail -->
  <!-- js -->
  <aside>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./js/magnifier.js"></script>
    <script type="text/javascript">
      $(function () {

        var magnifierConfig = {
          magnifier: "#magnifier1", //最外层的大容器
          width: 500, //承载容器宽
          height: 400, //承载容器高
          moveWidth: null, //如果设置了移动盒子的宽度，则不计算缩放比例
          zoom: 5 //缩放比例
        };

        var _magnifier = magnifier(magnifierConfig);
        /*magnifier的内置函数调用*/
        /*
        //设置magnifier函数的index属性
        _magnifier.setIndex(1);
    
        //重新载入主图,根据magnifier函数的index属性
        _magnifier.eqImg();
      */
        $('.nav p').click(function () {
          $(this).addClass('active').siblings().removeClass('active')
          var index = $(this).index()
          var indexn = index === 0 ? 1 : 0
          $('.list-content').eq(index).slideDown()
          $('.list-content').eq(indexn).slideUp()
        })
      });
    </script>
  </aside>
  <!-- /js -->
  <!-- 底部复用，可以删除 -->
  <footer class="footer">
    <div class="footer-content wrap">
      Copyright © 2017 临沂福寿陵园发展有限公司 All Rights Reserved.
    </div>
  </footer>
  <!-- /底部复用，可以删除 -->
</body>

</html>